<template>
    <div class="wrap">
        <div class="table-main">
            <el-button type="primary" size="mini" @click="clearFilter" icon="el-icon-delete">清除所有过滤器</el-button>
            <el-button type="primary" size="mini" @click="newEmployee" icon="el-icon-circle-plus-outline">新增员工
            </el-button>
            <el-button type="primary" size="mini" @click="createTodayAttend" icon="el-icon-circle-plus-outline">创建今日考勤表
            </el-button>
            <el-button type="success" size="mini" @click="goCheckAttend" icon="el-icon-camera">签到考勤
            </el-button>
            <el-table
                    style="margin-top: 20px"
                    size="small"
                    ref="filterTable"
                    :data="tableData"
                    border :cell-style="rowStyle">
                <el-table-column
                        prop="name"
                        label="员工名称"
                        sortable
                        width="160"
                        header-align="center">
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="员工类别"
                        width="160"
                        :filters="[{ text: '前台', value: '前台' }, { text: '教练', value: '教练' }, { text: '检修员', value: '检修员' },{ text: '保洁', value: '保洁' }]"
                        :filter-method="memberTag" header-align="center">
                    <template slot-scope="scope">
                        <el-tag
                                :type="employeeType(scope.row.type)"
                                disable-transitions>{{scope.row.type}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="手机号"
                        width="160" header-align="center">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="300" header-align="center">
                    <template slot-scope="scope">
                        <div style="display: flex;justify-content: space-around;align-items: center">
                            <el-button size="mini" @click="goUpdate(scope.row)">
                                修改信息
                            </el-button>
                            <el-button disabled size="mini" v-show="scope.row.clockIn===0"
                                       @click="signIn(scope.row.employeeId)">
                                今日未签到
                            </el-button>
                            <el-button style="margin-left: 10px" size="mini" type="info"
                                       v-show="scope.row.clockIn===1" disabled>今日已签到
                            </el-button>
                            <el-button :style="scope.row.clockIn===1?'margin-right:5px':''" size="mini" type="danger"
                                       @click="dismissByPhone(scope.row.phone)">解雇
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="block">
            <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :current-page.sync="current"
                    :page-size="10"
                    layout="prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        <NewEmployee :saveNewEmployeeShow="saveNewEmployeeShow" @cancel="saveNewEmployeeShow=false"/>
        <EmployeeUpdate :updateEmployeeForm="updateEmployeeForm" :updateShow="updateShow"
                        @cancel="updateShow=false"></EmployeeUpdate>
    </div>
</template>

<script>
    import NewEmployee from "@/components/employee/NewEmployee";
    import filter from "@/utils/filter";
    import {attend, dismissEmployeeByPhone, getTodayAttend, createTodayAttend} from "@/utils/apis/employee";
    import EmployeeUpdate from "@/components/employee/EmployeeUpdate";

    export default {
        name: "EmployeeList",
        components: {
            EmployeeUpdate,
            NewEmployee
        },
        data() {
            return {
                current: 1,
                total: 0,
                selectPhone: '',
                tableData: [],
                saveNewEmployeeShow: false,
                updateShow: false,
                updateEmployeeForm: {}
            }
        },
        created() {
            // this.handleCurrentChange(1)
            this.createTodayAttend()
        },
        computed: {
            employeeType() {
                return function (val) {
                    if (val === '前台')
                        return 'success'
                    if (val === '教练')
                        return 'waring'
                    else
                        return 'info'
                }
            }
        },
        methods: {
            //更新表格数据
            updateFormData(val) {
                const data = val.data.data
                this.total = data.total
                this.tableData = data.records
            },
            handleCurrentChange(val) {
                const loading = this.$loading({
                    lock: true,
                    text: '更新数据.......',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                this.current = val
                getTodayAttend(this.current, 10).then(res => {
                    this.updateFormData(res)
                    loading.close()
                })
            },
            clearFilter() {
                this.$refs.filterTable.clearFilter();
                this.handleCurrentChange(1)
                this.selectPhone = ''
            },
            //是否会员的标签
            memberTag(value, row) {
                return row.type === value
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            filterHandler(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            },
            //根据id解雇员工
            dismissByPhone(phone) {
                this.$confirm('此操作将删除该员工,请谨慎操作,是否确认?', '删除提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    dismissEmployeeByPhone(phone).then(res => {
                        console.log(res)
                        if (res.data.code === 200) {
                            this.$message.success('删除成功!')
                            this.handleCurrentChange(1)
                        } else {
                            this.$message.error(res.data.data)
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消删除'
                    });
                })
            },
            //新建员工
            newEmployee() {
                this.saveNewEmployeeShow = true
            },
            //表格文字居中
            rowStyle() {
                return "text-align:center";
            },
            //员工签到
            signIn(id) {
                const date = new Date()
                console.log()
                let present = {
                    employeeId: id,
                    date: filter.formatDate(date, 'yyyy-M-d')
                }
                attend(present).then(res => {
                    // console.log(res.data)
                    if (res.data.code === 200) {
                        this.$message.success('签到成功')
                        this.handleCurrentChange(this.current)
                    } else {
                        this.$message.error(res.data.message)
                    }
                })
            },
            //创建今日考勤表
            createTodayAttend() {
                createTodayAttend().then(res => {
                    if (res.data.code === 200) {
                        this.handleCurrentChange(1)
                    }
                })
            },
            goCheckAttend() {
                this.$router.push('/faceCheck')
            },
            //打开修改页
            goUpdate(employee) {
                this.updateEmployeeForm = employee
                this.updateShow = true
            },

        }
    }
</script>

<style scoped>

    .wrap {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .table-main {
        width: 781px;
    }

    .block {
        padding-top: 50px;
        margin-right: 70px;
    }

</style>